@include('backstage/public/_header')
    <style>
    .add_tab td span #thume {
        line-height: 100px;
        color: #d94040;
        font-size: 14px;
        text-align: center;
    }
    .imgbox{
        width:1200px;
    }
    .none{
        width: 0px;
        height: 0px;
        display: none;
    }
    .albCt{
        float: left;
        width: 244px;
        height: 278px;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 3px;
        border: 1px dashed #E2E2E2;
        background: #FAFFEE;
        text-align: center;
    }
    </style>
    <div class="result_wrap">
        <form id="form_data">
            {!!csrf_field()!!}
            <table class="add_tab">
                <tbody>
                    <tr>
                        <th width="10%"><i class="require">*</i>广告名称：</th>
                        <td>
                            <input type="text" name="name">
                            <span><i class="fa fa-exclamation-circle yellow"></i>请输入广告名称!</span>
                        </td>
                    </tr>
                    <tr>
                        <th>广告类型：</th>
                        <td>
                            <input type="text" name="type" onKeyUp="value=value.replace(/[^a-zA-Z]/g,'')">
                            <span><i class="fa fa-exclamation-circle yellow"></i>请输入广告类型! (<font color="red">只能输入英文字母</font>)</span>
                        </td>
                    </tr>
                    <tr>
                        <th>广告圖片：</th>
                        <td>
                            <div onclick="addimg()" style="display:block;position:relative;width:260px;height:24px;position:relative;border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;cursor: pointer;">
                                <span style="position:absolute;color:#000;font-size:14px;top:-5px;left:28px;">选择本地图片<font style="font-family:KaiTi ;font-size:13px;color: #000;">（单图最大未2M）</font></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>圖片预览：</th>
                        <td>
                            <div class="imgbox">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>开始时间：</th>
                        <td>
                            <input type="text" id="J-xl" name="start_time" readonly>
                            <span><i class="fa fa-exclamation-circle yellow"></i>请选择上线时间</span>
                        </td>
                    </tr>
                    <tr>
                        <th>结束时间：</th>
                        <td>
                            <input type="text" id="J-x2" name="end_time" readonly>
                            <span><i class="fa fa-exclamation-circle yellow"></i>默认为一个月</span>
                        </td>
                    </tr>
                    <tr>
                        <th>版位描述：</th>
                        <td>
                            <textarea name="desc"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td>
                            <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                            <input type="button" class="back" onclick="history.go(-1)" value="返回">
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        <div class="tips">
            <h3>添加廣告說明</h3>
            <p>1、圖片上傳只允許".png", ".jpg", ".jpeg", ".gif", ".bmp"，文件大小不超過2M</p>
            <p>2、點擊提交 -&gt; 添加廣告，返回-&gt; 可以回到廣告列表</p>
        </div>
    </div>
    <script type="text/javascript">
    laydate({
        elem: '#J-xl'
    });
    laydate({
        elem: '#J-x2'
    });
    var vfTime = 2;
    var timer=null;
    function setTime(){
        vfTime --;
        if(vfTime<=0){
            vfTime = 0;
            clearInterval(timer);
        }
    }
    function onSubmit(){
        var name=$(":input[name='name']").val();
        var type=$(":input[name='type']").val();
        var start_time=$(":input[name='start_time']").val();
        if (vfTime!=0 && timer!=null){
            layer.msg('操作過於頻繁', {icon: 7,anim: 6});
            // setTimeout(function(){$("#chiContent").focus();}, 1500);
            return false;
        }
        if (name==''){
            layer.msg('广告名称不能为空', {icon: 5,anim: 6});
            setTimeout(function(){$(":input[name='name']").focus();}, 1500);
            return false;
        }
        if (type=='') {
            layer.msg('广告类型不能为空！', {icon: 5,anim: 6});
            setTimeout(function(){$(":input[name='type']").focus();},0);
            return false;
        }
        if (start_time=='') {
            layer.msg('开始时间不能为空', {icon: 5,anim: 6});
            setTimeout(function(){$(":input[name='start_time']").focus();},0);
            return false;
        }
        var form = new FormData(document.getElementById("form_data"));
        // console.log(form);
        $.ajax({
            url:"{{$doadd}}",
            type:"post",
            data:form,
            processData:false,
            contentType:false,
            dataType : "json",
            success:function(data){
                if(data.status==1){
                    layer.msg(data.message, {icon: 6});
                    setTimeout(function(){
                        window.location.href=data.jumpUrl;
                    },2000);
                }else if(data.status==-1){
                    layer.alert(data.message, {icon: 2,anim:6});
                }else{
                    layer.msg(data.message, {icon: 5});
                }
                clearInterval(timer);
                timer = setInterval(setTime, 1000, "1");
                
            },
            error:function(e){
                layer.msg(e, {icon: 5,anim: 6});
                clearInterval(timer);
                timer = setInterval(setTime, 1000, "1");
            }
        });
    }
    function change(id){
        $("#img"+id).show();
        var i = document.getElementById('imgdata'+id).files[0];
        var src = window.URL.createObjectURL(i);
        $('#img'+id+'>a').eq(0).attr('href',src);
        $('#img'+id+'>a>img').attr('src',src);
    }
    // 增加圖片
    function addimg(){
        var myDate = new Date();
        var ind = -myDate.getMilliseconds();
        var indval = $("#imgbox>div[class='none']>input").last().val();
        // alert(indval);
        if(indval == undefined || indval !=''){
            var s='';
            s+='<div class="albCt" id="img'+ind+'" style="display:none;">';
            s+='<a href="" target="_blank">';
            s+='<img width="120" height="120" src="" style="vertical-align: middle;">';
            s+='</a>';
            s+='<a onclick="delPic('+ind+')" href="javascript:;">[删除]</a>';
            s+='<a onclick="leftPic('+ind+')" href="javascript:;">[前移]</a>';
            s+='<a onclick="rightPic('+ind+')" href="javascript:;">[后移]</a>';
            s+='<div style="margin-top:10px; height: 50px;line-height: 50px;">注释：';
            s+='<input type="text" style="width:180px;" value="" name="info[]">';
            s+='</div>';
            s+='<div class="none">';
            s+='<input type="file" id="imgdata'+ind+'" name="img_url[]" onchange="change('+ind+')" accept="image/gif,image/png,image/jpeg"/>';
            s+='</div>';
            s+='<div style="margin-top:10px;height: 50px;line-height: 50px;">地址：';
            s+='<input type="text" style="width:180px;" value="" name="jump_url[]"></div>';
            s+='</div>';
            $('.imgbox').append(s);
            $("#imgdata"+ind).click();
        }else{
            $("#imgbox>div[class='none']>input").last().click();
        }
        
    }
    function delPic(id){
        $('#img'+id).remove();
    }
    function leftPic(id){
        $('#img'+id).prev().before($('#img'+id));
    }
    function rightPic(id){
        $('#img'+id).next().after($('#img'+id));
    }
    </script>
@include('backstage/public/_footer')